<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
    <div id="main" style="width: 100%;height:100%;"></div>
    <script src="../../components/echarts-4.0.4.min.js"></script>
        <script>
            var pieChart = echarts.init(document.getElementById('main'));
            var	data=[
                {value:70640,name:'发明申请'},
				{value:45604,name:'发明授权'},
				{value:22418,name:'实用新型'},
				{value:2556,name:'外观设计'}
            ];
            
            var legends = [];
            for(var i = 0; i < data.length; i++){
            	legends.push(data[i].name);
            }
            var pieOption = {
                title: {
                    text: '专利类型',
                    left: 'center',
                    top: "7%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b','#032272','#1b8a83','#36bdb4'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: { //图例组件，颜色和名字
                    show: true,
			        left: '10%',
			        top: '25%',
			        orient: 'vertical',
			        itemGap: 12, //图例每项之间的间隔
			        itemWidth: 10,
			        itemHeight: 10,
			        height: '70%',
			        icon: 'rect',
			        data: legends,
			        textStyle: {
			          color: '#FFF',
			          fontStyle: 'normal',
			          fontFamily: '微软雅黑',
			          fontSize: 16
			        }
		    	},
                series: [{
        			center: ['50%', '60%'], //饼图的中心（圆心）坐标
                    name: '专利类型',
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 5, //最小的扇区角度（0 ~ 360）
                    avoidLabelOverlap: true, //是否启用防止标签重叠
                    itemStyle: { //图形样式
			          normal: {
			            borderColor: '#fff',
			            borderWidth: 1
			          }
			        },
			        label: { //标签的位置
			          normal: {
			            show: true,
			            position: 'inside', //标签的位置
			            formatter: "{b}",
			            textStyle: {
			              color: '#fff'
			            }
			          },
			          emphasis: {
			            show: true,
			            textStyle: {
			              fontWeight: 'bold'
			            }
			          }
			        },
                    radius: ['0', '60%'],//饼图的半径
                    data: data
                }]
            };

            var currentIndex = -1;
            var timer1 = setInterval(function () {
                var dataLen = pieOption.series[0].data.length;
                // 取消之前高亮的图形
                pieChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                pieChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1000);
            pieChart.setOption(pieOption);
        </script>
    </body>
</html>